<template>
  <div class="fund-registration">
    <el-row style="margin-bottom: 10px">
      <el-tag>项目总预算：{{ fundsInfo.fundsAmount || 0 }}元</el-tag>
      <el-tag type="danger">
        已使用：{{ fundsInfo.fundsActual || 0 }}元
      </el-tag>
      <el-tag type="success">剩余：{{ fundsInfo.fundsRest || 0 }}元</el-tag>
      <el-tag>使用率：{{ fundsInfo.fundsPercent || 0 }}%</el-tag>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="登记科目" align="center" prop="fundsEnumName" />
      <el-table-column label="预算支出" align="center" width="110">
        <template slot-scope="{ row }">{{ row.fundsAmount || 0 }}元</template>
      </el-table-column>
      <el-table-column label="实际支出" align="center" width="110">
        <template slot-scope="{ row }">{{ row.fundsActual || 0 }}元</template>
      </el-table-column>
      <el-table-column label="剩余款项" align="center" width="110">
        <template slot-scope="{ row }">{{ row.fundsRest || 0 }}元</template>
      </el-table-column>
      <el-table-column label="使用率" align="center" width="110">
        <template slot-scope="{ row }">{{ row.fundsPercent || 0 }}%</template>
      </el-table-column>
      <el-table-column label="登记人" align="center" prop="updateBy" />
      <el-table-column
        label="更新时间"
        align="center"
        prop="detailsUpdateTime"
      />
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" plain @click="detail(row, 1)">
            编辑
          </el-button>
          <el-button size="mini" type="success" plain @click="detail(row, 0)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      width="780px"
      title="经费登记"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form ref="form">
        <el-row class="info">
          <el-col :span="10">
            <el-form-item label="登记科目">
              {{ subjectInfo.fundsEnumName }}
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="预算支出">
              {{ subjectInfo.fundsAmount || 0 }}元
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="剩余款项">
              {{ subjectInfo.fundsRest || 0 }}元
            </el-form-item>
          </el-col>
        </el-row>
        <el-table
          style="margin-bottom: 25px"
          size="small"
          border
          highlight-current-row
          :data="fundsDetails"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          />
          <el-table-column
            label="项目实施内容"
            align="center"
            prop="titleContent"
          >
            <template slot-scope="{ row }">
              <el-input v-if="isEdit" size="mini" v-model="row.fundsContent" />
              <span v-else>{{ row.fundsContent }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实际支出(元)" align="center" width="180">
            <template slot-scope="{ row }">
              <el-input-number
                v-if="isEdit"
                style="width: 100%"
                size="mini"
                v-model="row.fundsActual"
                :min="0"
                @change="(e) => changeNumber(e, row)"
              />
              <span v-else>{{ row.fundsActual }}</span>
            </template>
          </el-table-column>
          <el-table-column label="使用占比" align="center" width="100">
            <template slot-scope="{ row }">
              {{ row.usePercent || 0 }}%
            </template>
          </el-table-column>
          <el-table-column align="center" width="80" v-if="isEdit">
            <template slot-scope="{ $index }">
              <el-button
                v-if="$index === fundsDetails.length - 1"
                size="mini"
                type="primary"
                icon="el-icon-plus"
                @click="lineOperate(1)"
              />
              <el-button
                v-else
                size="mini"
                type="danger"
                icon="el-icon-minus"
                @click="lineOperate(0, $index)"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-form-item class="note" label="备注">
          <el-input v-if="isEdit" type="textarea" v-model="subjectInfo.note" />
          <span v-else>{{ subjectInfo.note }}</span>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="visible = false">关 闭</el-button>
          <el-button v-if="isEdit" type="primary" @click="submit">
            提 交
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  projectFundsInfo,
  getFundsList,
  projectFundsDetailsList,
  addFundDetail,
} from "@/api2/projectManagement/process";

export default {
  inject: ["projectId"],
  data() {
    return {
      fundsInfo: {},
      tableData: [],
      listLoading: false,
      visible: false,
      isEdit: false,
      subjectInfo: {},
      fundsDetails: [],
    };
  },
  mounted() {
    this.getFundsInfo();
    this.getList();
  },
  methods: {
    async getFundsInfo() {
      const res = await projectFundsInfo({ projectId: this.projectId });
      this.fundsInfo = res.data;
    },
    getList() {
      this.listLoading = true;
      getFundsList({ projectId: this.projectId }).then((data) => {
        this.listLoading = false;
        this.tableData = data.data;
      });
    },
    async detail({ fundsId }, type) {
      this.isEdit = !!type;
      this.visible = true;
      const { data } = await projectFundsDetailsList({ fundsId });
      this.subjectInfo = { ...data.funds, note: data.note };
      const arr =
        data.list?.length > 0 ? data.list : type ? [{ fundsActual: 0 }] : [];
      this.fundsDetails = arr;
    },
    changeNumber(val, row) {
      // 实际支出
      this.$set(row, "fundsActual", val);
      // 使用占比
      const ratio = parseInt((val / (this.subjectInfo.fundsAmount || 0)) * 100);
      this.$set(row, "usePercent", ratio);
      // 剩余款项
      const used = this.fundsDetails?.reduce((s, n) => {
        return s + n.fundsActual;
      }, 0);
      const residue = this.subjectInfo.fundsAmount - used;
      this.$set(this.subjectInfo, "fundsRest", residue);
    },
    lineOperate(type, idx) {
      if (type) {
        this.fundsDetails.push({ fundsActual: 0 });
      } else {
        this.fundsDetails.splice(idx, 1);
      }
    },
    async submit() {
      const validate = this.fundsDetails.every((item) => !!item.fundsContent);
      if (!validate) {
        this.$message.error("请输入项目实施内容");
        return;
      }
      const { fundsId, note } = this.subjectInfo;
      const xmProjectFundsDetails = [...this.fundsDetails];
      const params = { fundsId, xmProjectFundsDetails, note };
      await addFundDetail(params);
      this.visible = false;
      this.$message.success("编辑成功");
      this.getFundsInfo();
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.info .el-form-item {
  margin-bottom: 15px;
}
.note {
  display: flex;
  ::v-deep {
    .el-form-item__content {
      flex: 1;
    }
  }
}
.dialog-footer {
  margin-bottom: 0;
  text-align: center;
  ::v-deep {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
